<template>
  <div class="profile-page">
    <!-- 固定顶部导航栏 -->
    <t-navbar title="我的" :border="false" class="app-navbar">
      <template #left></template>
      <template #right>
        <t-icon name="setting" size="24" @click="showToast('设置功能开发中')" class="nav-icon" />
      </template>
    </t-navbar>

    <!-- 页面内容（确保在导航栏下方） -->
    <div class="page-content">
      <!-- 用户信息区域 -->
      <div class="user-info-container" @click="showToast('查看个人资料')">
        <div class="user-avatar">
          <t-avatar shape="circle" size="large">
            <img src="https://picsum.photos/id/64/200/200" alt="用户头像" class="avatar-img" />
          </t-avatar>
          <div class="vip-badge">
            <t-badge dot>
              <t-icon name="vip" size="16" />
            </t-badge>
          </div>
        </div>
        <div class="user-details">
          <div class="user-name">张小明</div>
          <div class="user-id">ID: 87654321</div>
          <div class="user-level">
            <t-tag theme="primary" size="small">Lv.12</t-tag>
            <span class="progress-text">距离下一级还需320积分</span>
          </div>
        </div>
        <t-icon name="chevron-right" size="24" class="arrow-icon" />
      </div>

      <!-- 数据概览 -->
      <div class="stats-container">
        <div class="stat-item" @click="showToast('我的订单')">
          <div class="stat-value">24</div>
          <div class="stat-label">我的订单</div>
        </div>
        <div class="stat-item" @click="showToast('我的收藏')">
          <div class="stat-value">18</div>
          <div class="stat-label">我的收藏</div>
        </div>
        <div class="stat-item" @click="showToast('消息通知')">
          <div class="stat-value">5</div>
          <div class="stat-label">消息通知</div>
        </div>
        <div class="stat-item" @click="showToast('我的积分')">
          <div class="stat-value">1680</div>
          <div class="stat-label">我的积分</div>
        </div>
      </div>

      <!-- 功能菜单（修正后的列表） -->
      <t-list title="功能菜单" :border="false">
        <t-cell
          v-for="(item, index) in menuItems"
          :key="index"
          :arrow="item.arrow"
          @click="handleMenuClick(item.label)"
        >
          <template #left-icon>
            <t-icon :name="item.icon" size="24" />
          </template>
          <template #title>
            <span class="menu-label">{{ item.label }}</span>
          </template>
        </t-cell>
      </t-list>

      <!-- 退出登录按钮 -->
      <t-button
        theme="default"
        variant="outline"
        class="logout-btn"
        @click="handleLogout"
      >
        退出登录
      </t-button>
    </div>

    <!-- 弹窗确认 -->
    <t-dialog
      v-model="logoutDialogVisible"
      title="确认退出"
      content="确定要退出当前账号吗？"
      :confirm-btn="confirmBtn"
      :cancel-btn="cancelBtn"
    />

    <!-- 提示框 -->
    <t-toast v-model="toastVisible" :content="toastContent" :duration="2000" />
  </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';

// 删除此行未使用的导入
// import { Toast } from 'tdesign-mobile-vue';

// 菜单数据（使用官方支持的图标名称）
const menuItems = [
  { icon: 'cart', label: '我的订单', arrow: true },
  { icon: 'discount', label: '优惠券', arrow: true },
  { icon: 'location', label: '收货地址', arrow: true },
  { icon: 'creditcard', label: '支付方式', arrow: true },
  { icon: 'star', label: '我的收藏', arrow: true },
  { icon: 'history', label: '浏览历史', arrow: true },
];

// 弹窗配置
const logoutDialogVisible = ref(false);
const confirmBtn = {
  text: '确认',
  onClick: () => {
    logoutDialogVisible.value = false;
    showToast('已退出登录');
  },
};
const cancelBtn = {
  text: '取消',
  onClick: () => {
    logoutDialogVisible.value = false;
  },
};

// 提示框配置
const toastVisible = ref(false);
const toastContent = ref('');
const showToast = (content: string) => {
  toastContent.value = content;
  toastVisible.value = true;
};

// 菜单点击事件
const handleMenuClick = (label: string) => {
  showToast(`${label}功能开发中`);
};

// 退出登录处理
const handleLogout = () => {
  logoutDialogVisible.value = true;
};
</script>

<style scoped>
/* 基础页面布局 */
.profile-page {
  position: relative;
  background-color: #f5f5f5;
  min-height: 100vh;
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}

/* 固定导航栏样式 */
.app-navbar {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 100;
  padding-top: constant(safe-area-inset-top);
  padding-top: env(safe-area-inset-top);
  background-color: #fff;
}

/* 页面内容区域（避开导航栏） */
.page-content {
  padding-top: calc(48px + constant(safe-area-inset-top));
  padding-top: calc(48px + env(safe-area-inset-top));
  padding-bottom: 20px;
}

/* 列表项样式 */
.menu-label {
  font-size: 16px;
  color: #333;
}

/* 用户信息区域 */
.user-info-container {
  display: flex;
  align-items: center;
  background-color: #fff;
  padding: 20px 16px;
  margin: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.user-avatar {
  position: relative;
  margin-right: 16px;
}

.avatar-img {
  width: 72px;
  height: 72px;
  border-radius: 50%;
  object-fit: cover;
}

.vip-badge {
  position: absolute;
  bottom: 0;
  right: 0;
  background-color: #fff;
  border-radius: 50%;
  padding: 2px;
  transform: translate(25%, 25%);
}

.user-details {
  flex: 1;
}

.user-name {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.user-id {
  font-size: 12px;
  color: #999;
  margin-bottom: 8px;
}

.user-level {
  display: flex;
  align-items: center;
}

.progress-text {
  font-size: 12px;
  color: #666;
  margin-left: 8px;
}

.arrow-icon {
  color: #ccc;
}

/* 数据概览 */
.stats-container {
  display: flex;
  justify-content: space-around;
  background-color: #fff;
  padding: 20px 0;
  margin: 0 10px 10px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

.stat-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  width: 25%;
}

.stat-value {
  font-size: 18px;
  font-weight: 600;
  color: #333;
  margin-bottom: 4px;
}

.stat-label {
  font-size: 14px;
  color: #666;
}

/* 菜单样式 */
.t-list {
  background-color: #fff;
  margin: 10px;
  border-radius: 8px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
}

/* 退出登录按钮 */
.logout-btn {
  width: calc(100% - 20px);
  margin: 20px 10px 0;
  height: 48px;
  font-size: 16px;
  border-color: #ff4d4f;
  color: #ff4d4f;
}

/* 响应式调整 */
@media (max-width: 375px) {
  .user-info-container {
    padding: 15px 12px;
  }
  
  .avatar-img {
    width: 60px;
    height: 60px;
  }
  
  .user-name {
    font-size: 16px;
  }
  
  .menu-label {
    font-size: 15px;
  }
}
</style>